import {
  Directive,
  ElementRef,
  Input,
  Optional,
  Renderer2, Self,
} from '@angular/core';
import { NgControl } from '@angular/forms';
import { ApesSizeLDSType, toBoolean } from '@shared/apes/core';


@Directive({
  selector: '[apes-input]',
  exportAs: 'apesInput',
  host    : {
    '[class.apes-input]': 'true',
    '[class.apes-input-disabled]': 'disabled',
    '[class.apes-input-lg]': `apesSize === 'large'`,
    '[class.apes-input-sm]': `apesSize === 'small'`
  }
})
export class ApesInputDirective {
  private _disabled = false;
  @Input() apesSize: ApesSizeLDSType = 'default';
  @Input()
  set disabled(value: boolean) {
    this._disabled = toBoolean(value);
  }

  get disabled(): boolean {
    if (this.ngControl && this.ngControl.disabled !== null) {
      return this.ngControl.disabled;
    }
    return this._disabled;
  }

  constructor(@Optional() @Self() public ngControl: NgControl, renderer: Renderer2, elementRef: ElementRef) {
    renderer.addClass(elementRef.nativeElement, 'apes-input');
  }
}
